PWA Night vol.3
~PWAのミライや活用方法をみんなで考えよう~
https://connpass-tokyo.s3.amazonaws.com/thumbs/d5/3c/d53c1bb45095a7b741cf3d43388a3ee2.png
開催趣旨
PWAについて制作・開発会社の中でも関心が高まってきています。いまは主にエンジニア中心に認知が広がっている状況で、本格的なビジネス活用や消費者への浸透はこれから・・・というところかと思います。 このPWA勉強会では、エンジニアはもちろん、幅広くPWAに関心をもった有志の方に集まっていただき、PWAの活用方法やPWAのミライについて考えていく会にしたいと思っています。 まだまだ学びの多い技術、みんなでカジュアルに、フラットに情報交換していきましょう!
PWA Nightでやること
PWA Nightでは技術に関する話はもちろん、実際にどんな場面で適用できるのか、その時の留意点、顧客への提案方法や、事業への導入方法など、PWAを技術やビジネス面から捉えてコミュニケーションをしたいと考えています。
どんな方が対象?
プログラマー、デザイナー、ディレクターがメインですが、PWAに興味がある、PWAを使ってみたいという方はぜひぜひご参加ください!
PWAは新しいWebの流れになります。皆さん、楽しく新しい時代を作りましょう!
PWA Nightは毎月第三水曜日に開催します!
登壇者
初めてのPWA開発
~あなたのWebサイトがPWAになるまで~
https://speakerd.s3.amazonaws.com/presentations/ed327227a6bc490ea30f43a2380d8f59/slide_0.jpg
PWA=Googleが推進する先進的なモバイルウェブのUXの指針
Reliable & Fast & Engaging
ネットワーク接続に依存しない
常に最新
インストール可能
ServiceWorker?
アプリごとにブラウザに登録されてBackgroundで動作する
キャッシュストレージを最新に維持する
ServiceWorkerのイベント
インストール(ブラウザ登録)
サーバーから直接
JSが実行されてServiceWorkerの登録処理
Activate状態
サーバーリクエスト・ServiceWorkerがCatch・返す⇒サーバーに飛ばない
ServiceWorkerがサーバーにリクエスト、Cacheされる
SeviceWorkerが更新されると?
一旦DLされた新しいServiceWorkerはすぐにはインストールされない
Updateのタイミングは、ユーザーが古いアプリを全てを終了したとき
ユーザーがアプリを見ていない裏でUpdateが走っている
基本コードの紹介…
ウェブアプリマニフェストは省略ね。
JSONで書いたアプリの素性とか設定とか。
インストールに関わる部分
More Progressive
UI/UX / Performance / Other
前のQAの紹介
容量?
ブラウザごとにバラバラ。気をつけよう
ブラウザ標準のHTTPキャッシュ機能の影響?
わからん。 わからん。。。
ブラウザごとの対応状況の違いはどうすれば?
違いが出る部分をアプリのクリティカルな部分で使わない
どうしてもと言うなら解決方法(環境の設定とか)をユーザーに提案する
Cache APIに触れる
https://speakerd.s3.amazonaws.com/presentations/41cb81a67d744687a582e925a0713b7e/slide_0.jpg
ネットワーク接続に依存しない
ServiceWorkerがネットワークを代理してCacheを使う
SerivceWorker
Push通知
オフライン対応
ネットワークのイベントにイベントリスナを登録できる
イベントリスナでCacheにあたったらCacheを返すし、なかったらCacheに入れる
ServiceWorkerがCacheの仕組みを持っているわけではない。
ブラウザのCacheAPIがやってる。
LocalStrageと似てる
有効期限などは持てない
StorageEstimateAPIでCacheUsageがわかる
(画像)こんな画面…
GETだとかPOSTだとか、あたったかとか
CacheAPIを使うコードを紹介(スライド見てね)
method(追加系/取得系/削除系)紹介
プロダクトでどう使う?
必要な静的リソースを先読んでおく
古いのを消して新しいのを読んでおく
VersionをSearch部で表現
Full URL Match当たらない→ ignoreSearchオプション付きで削除が便利
RoRをVueJS + Nuxt PWAで置き換えてみた
広島の人
やってること
業務システム
セキュリティ
Hasura
PostgreSQLの上でGraphQLが使える
Vue Storefront
スマホでみんな何やってる?
Google/FB/Insta...
どれも世界最速のアプリ
ユーザーの期待値は高い
常に世界最速と比べられる
PWAで速さを手に入れろ
PWA化でホテルの売上が300%UP
OpenSqoo
Pitarest
ITは新しいことやらなきゃだめ?
そんなことはない
今を改善すれば確実に伸びる
PWAへの置き換え?
JAM Stack ( JavaScript/APIs/MarkupのStack )
Ruvy on Rails->JAM
Beufy使った
Android/iOS別の対応はわりと必要
EC2 → S3+Cloudfront
認証はAuth0
ログイン周りはシンプルに
CustomTableで移行も楽
KPIの改善はいずれ。
Jobsが10年前に言ったことが、今実現。
彼は10年先を生きていた。
参考
LT-1: 最大公約数的なServiceWorker制作から見るPWAの勘所
PWA For WP
プラグインであること
みんな使ってほしい
最大公約数
最初に導入するときのヒントにしてほしい
やること絞った
キャッシュ/オフライン/インストール/アイコン
他は後回し(お金に出来るかも)
キャッシュ
するもの・しないもの戦略
有効期限を切る
これから
OnlineFirstだけど、一部CacheFirstに
CacheFirstだけど、一部OnlineFirstに
除外ルールとか
LT-2: 後ほどアップデート
ServiceWorkerのCacheで色々と問題が出た話
地下アイドル向けのDappsを作った
画像を全部Cacheしてた
一瞬で上限に…
期限もねぇ
動画もある
上限と期限をつけた。もう安心。
ビルドしたソースが重い…
環境によっては上限に…
Cacheから動画が再生されない
Safariだけおかしい…
SafariはRangeリクエストを送ると、200をうける
そうするとRangeリクエストを読み込まない
LT-3: Ionic PWA Toolkitについて
IonicとPWA Toolkitについて
Ionicの歴史(スライド見てね)
2016年からPWAやってる
Ionic4でWebComponentsベースで色々幸せに
PWA Toolkit
Defaultがいい感じ
圧倒的敷居の低さ
スターターPJデモ
PokemonGoのサポートアプリとか作られてた
PWAでユーザー獲得
そっからアプリでバン
ロゴのキャラクターの名前が決まりました
PWAN(ぷわん)
考案者のJxckさんにはあとでオリジナルTシャツが送られます。